import load from '@/utils/jsapi.js';
import mapconfig from '@/config/config_map.js'
const VideoFusion = {
  async videoFusion(Parameters) {
    const [
      VideoFusion,
      externalRenderers,
      SpatialReference
    ] = await load([
      "extensions/videofunsion/VideoFusion1",
      "esri/views/3d/externalRenderers",
      "esri/geometry/SpatialReference",
    ]);
    // let gb = null;
    // var fusionExternalRenderer = {
    //   globalThis: this,
    //   renderer: null, // three.js renderer
    //   camera: null, // three.js camera
    //   scene: null, // three.js scene

    //   ambient: null, // three.js ambient light source

    //   iss: null, // ISS model
    //   issGroup: null,

    //   frustumHelper: null,
    //   frustPointsList: [],
    //   fusionCameraConfig: {
    //     calibResult: {
    //       info: "Success!",
    //       meanError: 16.248476730281979,
    //       Intrinsics: [
    //         [1654.5184940834888, 0, 960],
    //         [0, 1654.5184940834888, 540],
    //         [0, 0, 1]
    //       ],
    //       distCoeffs: [-0.08920157244676491, 0, 0, 0, 0],
    //       imageWidth: 1920,
    //       imageHeight: 1080,
    //       isUseFishEyeModel: false,
    //       images: [
    //         {
    //           imageFileName: "0",
    //           "Pose, camera to model": [
    //             [
    //               0.71558642498122227,
    //               -0.33616992114221073,
    //               0.61231189152411014,
    //               -5303.8322906896838
    //             ],
    //             [
    //               -0.69830948806865711,
    //               -0.32254247684280235,
    //               0.63900720614512663,
    //               931.53822684787224
    //             ],
    //             [
    //               -0.01731840800662382,
    //               -0.88484808569118245,
    //               -0.46555766344542748,
    //               30.157670585656888
    //             ]
    //           ],
    //           "max 2D-Distance": 858.30906620226256
    //         }
    //       ]
    //     }
    //   },

    //   generateFrustumHelper: function (fov, ratio, plane, position, pose) {
    //     var frustFOV = fov;
    //     var frustRatio = ratio;
    //     var frustPlane = plane;
    //     var frustH =
    //       frustPlane * Math.tan(THREE.Math.degToRad(frustFOV * 0.5));
    //     var frustW = frustH * frustRatio;
    //     this.frustPointsList = [
    //       new THREE.Vector3(),
    //       new THREE.Vector3(-frustW, -frustH, frustPlane),
    //       new THREE.Vector3(frustW, -frustH, frustPlane),
    //       new THREE.Vector3(-frustW, frustH, frustPlane),
    //       new THREE.Vector3(frustW, frustH, frustPlane)
    //     ];
    //     var frustGeom = new THREE.BufferGeometry().setFromPoints(
    //       this.frustPointsList
    //     );
    //     frustGeom.setIndex([
    //       0,
    //       1,
    //       0,
    //       2,
    //       0,
    //       3,
    //       0,
    //       4,
    //       1,
    //       2,
    //       2,
    //       4,
    //       4,
    //       3,
    //       3,
    //       1
    //     ]);
    //     var frustumHelperInFunc = new THREE.LineSegments(
    //       frustGeom,
    //       new THREE.LineBasicMaterial({
    //         color: 0xff0000,
    //         // colorWrite: false,
    //         // opacity: 0.0,
    //         transparent: true
    //       })
    //     );
    //     frustumHelperInFunc.position.set(
    //       parseFloat(position[0]),
    //       parseFloat(position[1]),
    //       parseFloat(position[2])
    //     );
    //     // frustumHelper.up.set(-0.0153, 0.1167, 0.9930);
    //     frustumHelperInFunc.setRotationFromMatrix(pose);
    //     frustumHelperInFunc.updateMatrixWorld();
    //     return frustumHelperInFunc;
    //   },

    //   applyCameraTexture: function () {
    //     var result = this.fusionCameraConfig.calibResult;
    //     var fovF =
    //       (2 *
    //         Math.atan(
    //           parseFloat(result.Intrinsics[1][2]) /
    //           parseFloat(result.Intrinsics[1][1])
    //         ) *
    //         180) /
    //       Math.PI;
    //     var poseAS = result.images[0]["Pose, camera to model"];
    //     var poseMat4 = new THREE.Matrix4().set(
    //       poseAS[0][0],
    //       poseAS[0][1],
    //       poseAS[0][2],
    //       poseAS[0][3],
    //       poseAS[1][0],
    //       poseAS[1][1],
    //       poseAS[1][2],
    //       poseAS[1][3],
    //       poseAS[2][0],
    //       poseAS[2][1],
    //       poseAS[2][2],
    //       poseAS[2][3],
    //       0.0,
    //       0.0,
    //       0.0,
    //       1.0
    //     );
    //     this.frustumHelper = this.generateFrustumHelper(
    //       fovF,
    //       16 / 9,
    //       20,
    //       [poseAS[0][3], poseAS[1][3], poseAS[2][3]],
    //       poseMat4
    //     );
    //     this.issGroup.add(this.frustumHelper);
    //     this.frustumHelper.updateMatrixWorld();
    //     let modelViewMatrixToFrustum = new THREE.Matrix4()
    //       .getInverse(this.frustumHelper.matrixWorld)
    //       .multiply(this.iss.matrixWorld.clone());
    //     var distCoeffs = result["distCoeffs"];
    //     let _this = this;
    //     console.log(_this);
    //     let player = document.getElementById("flv-video");
    //     let videoTexture = new THREE.VideoTexture(
    //       document.getElementById("flv-video")
    //     );
    //     this.iss.traverse(function (child) {
    //       if (child instanceof THREE.Mesh) {
    //         _this.frustPointsList.forEach((p, idx) => {
    //           console.log(
    //             _this.frustumHelper.localToWorld(new THREE.Vector3(0, 0, 0))
    //           );
    //           // _this.frustumHelper.localToWorld(child.material.uniforms.frustum.value[idx].copy(p));
    //           child.material.uniforms.frustum.value[idx].copy(p);
    //         });

    //         if (player.buffered.length) {
    //           // debugger
    //           child.material.uniforms.cameraTexture.value = videoTexture;
    //         } else {
    //           child.material.uniforms.cameraTexture.value = new THREE.TextureLoader().load(
    //             "./chy/cam.png"
    //           );
    //         }
    //         child.material.uniforms.modelViewMatrixToFrustum.value = modelViewMatrixToFrustum.clone();
    //         if (distCoeffs.length >= 5) {
    //           child.material.uniforms.distCoeff.value = new THREE.Vector4(
    //             distCoeffs[0],
    //             distCoeffs[1],
    //             distCoeffs[4],
    //             0
    //           );
    //         } else {
    //           child.material.uniforms.distCoeff.value = new THREE.Vector4(
    //             distCoeffs[0],
    //             distCoeffs[1],
    //             distCoeffs[2],
    //             distCoeffs[3]
    //           );
    //         }
    //         child.material.uniforms.isFishEyeModel.value = false;
    //         child.material.uniforms.useUndistort.value = true;
    //         child.material.uniforms.isPreview.value = 1;
    //         // _this.renderer.render(_this.scene, _this.camera);
    //         child.material.needsUpdate = true;
    //       }
    //     });

    //     this.frustPointsList.forEach((p, idx) => {
    //       this.planeFusionMtl.uniforms.frustum.value[idx].copy(p);
    //     });
    //     if (player.buffered.length) {
    //       this.planeFusionMtl.uniforms.cameraTexture.value = videoTexture;
    //     } else {
    //       this.planeFusionMtl.uniforms.cameraTexture.value = new THREE.TextureLoader().load(
    //         "./chy/cam.png"
    //       );
    //     }
    //     this.planeFusionMtl.uniforms.modelViewMatrixToFrustum.value = modelViewMatrixToFrustum.clone();
    //     if (distCoeffs.length >= 5) {
    //       this.planeFusionMtl.uniforms.distCoeff.value = new THREE.Vector4(
    //         distCoeffs[0],
    //         distCoeffs[1],
    //         distCoeffs[4],
    //         0
    //       );
    //     } else {
    //       this.planeFusionMtl.uniforms.distCoeff.value = new THREE.Vector4(
    //         distCoeffs[0],
    //         distCoeffs[1],
    //         distCoeffs[2],
    //         distCoeffs[3]
    //       );
    //     }
    //     this.planeFusionMtl.uniforms.isFishEyeModel.value = false;
    //     this.planeFusionMtl.uniforms.useUndistort.value = true;
    //     this.planeFusionMtl.uniforms.isPreview.value = 1;
    //     // _this.renderer.render(_this.scene, _this.camera);
    //     this.planeFusionMtl.needsUpdate = true;
    //   },

    //   loadMesh: function () {
    //     var issMeshUrl = "http://10.201.37.225:8080/map/arcgis/VideoFusion/CHY_reduced.obj";
    //     let _this = this;
    //     var loader = new THREE.OBJLoader(THREE.DefaultLoadingManager);
    //     loader.load(
    //       issMeshUrl,
    //       function (object3d) {
    //         this.iss = object3d;
    //         this.iss.traverse(
    //           function (child) {
    //             if (child instanceof THREE.Mesh) {
    //               child.material = this.fusionMtl;
    //             }
    //           }.bind(this)
    //         );

    //         // add the model
    //         this.issGroup.add(this.iss);

    //         var renderPos = [0, 0, 0];
    //         externalRenderers.toRenderCoordinates(
    //           window.sceneView,
    //           [0, 0, 0],
    //           0,
    //           SpatialReference.WGS84,
    //           renderPos,
    //           0,
    //           1
    //         );
    //         this.issGroup.position.set(
    //           renderPos[0],
    //           renderPos[1],
    //           renderPos[2]
    //         );

    //         this.issGroup.updateMatrix();
    //         this.issGroup.updateMatrixWorld(true);
    //         this.issGroup.updateWorldMatrix(true, true);
    //         console.log(this.issGroup);
    //         console.log(
    //           this.issGroup.localToWorld(new THREE.Vector3(0, 0, 0))
    //         );

    //         this.applyCameraTexture();

    //         let planeGeo = new THREE.PlaneGeometry(30000, 30000);

    //         this.plane = new THREE.Mesh(planeGeo, this.planeFusionMtl);
    //         this.plane.position.set(0.0, 0.0, 1.0);
    //         this.issGroup.add(this.plane);

    //         console.log(this.frustumHelper);
    //       }.bind(this),
    //       undefined,
    //       function (error) {
    //         console.error("Error loading ISS mesh. ", error);
    //       }
    //     );
    //   },

    //   /**
    //    * Setup function, called once by the ArcGIS JS API.
    //    */
    //   setup: function (context) {
    //     gb = this;
    //     // initialize the three.js renderer
    //     //////////////////////////////////////////////////////////////////////////////////////
    //     this.renderer = new THREE.WebGLRenderer({
    //       context: context.gl,
    //       premultipliedAlpha: false
    //       // antialias: true,
    //       // logarithmicDepthBuffer: true
    //     });
    //     this.renderer.setPixelRatio(window.devicePixelRatio);
    //     this.renderer.setViewport(0, 0, window.sceneView.width, window.sceneView.height);

    //     // prevent three.js from clearing the buffers provided by the ArcGIS JS API.
    //     this.renderer.autoClearDepth = false;
    //     this.renderer.autoClearStencil = false;
    //     this.renderer.autoClearColor = false;
    //     this.issGroup = new THREE.Group();

    //     // The ArcGIS JS API renders to custom offscreen buffers, and not to the default framebuffers.
    //     // We have to inject this bit of code into the three.js runtime in order for it to bind those
    //     // buffers instead of the default ones.
    //     var originalSetRenderTarget = this.renderer.setRenderTarget.bind(
    //       this.renderer
    //     );
    //     this.renderer.setRenderTarget = function (target) {
    //       originalSetRenderTarget(target);
    //       if (target == null) {
    //         context.bindRenderTarget();
    //       }
    //     };

    //     // setup the three.js scene
    //     ///////////////////////////////////////////////////////////////////////////////////////

    //     this.scene = new THREE.Scene();

    //     // setup the camera
    //     this.camera = new THREE.PerspectiveCamera();

    //     var cubeGeo = new THREE.BoxGeometry(100000, 100000, 100000);
    //     var cubeMtl = new THREE.MeshBasicMaterial({
    //       color: 0x00ff00,
    //       wireframe: true
    //     });
    //     this.cubeMono = new THREE.Mesh(cubeGeo, cubeMtl);
    //     this.scene.add(this.cubeMono);

    //     // setup the shader material
    //     this.fusionMtl = new THREE.ShaderMaterial({
    //       uniforms: THREE.UniformsUtils.merge([
    //         THREE.UniformsLib["common"],
    //         THREE.UniformsLib.specularmap,
    //         THREE.UniformsLib.envmap,
    //         THREE.UniformsLib.aomap,
    //         THREE.UniformsLib.lightmap,
    //         THREE.UniformsLib.fog,
    //         {
    //           hasVertexColor: { value: false },
    //           isFishEyeModel: { value: false },
    //           useUndistort: { value: true },
    //           baseColor: { value: new THREE.Color(0xffffff) },
    //           isPreview: { value: 0 },
    //           distCoeff: { value: new THREE.Vector4(0, 0, 0, 0) },
    //           frustum: {
    //             value: [
    //               new THREE.Vector3(),
    //               new THREE.Vector3(),
    //               new THREE.Vector3(),
    //               new THREE.Vector3(),
    //               new THREE.Vector3()
    //             ]
    //           },
    //           hasBaseTexture: {
    //             value: false
    //           },
    //           baseTexture: {
    //             value: null
    //           },
    //           cameraTexture: {
    //             value: new THREE.TextureLoader().load("./chy/cam.png")
    //           },
    //           modelViewMatrixToFrustum: {
    //             value: new THREE.Matrix4()
    //           },
    //           isTransparent: {
    //             value: true
    //           }
    //           // depthTexture: {
    //           //     value: depthRenderTarget.texture,
    //           // },
    //           // depthCameraNear: {
    //           //     value: depthCamera.near,
    //           // },
    //           // depthCameraFar: {
    //           //     value: depthCamera.far,
    //           // }
    //         }
    //       ]),
    //       vertexColors: THREE.VertexColors,
    //       depthTest: true,
    //       transparent: true,

    //       // wireframe: true,
    //       // vertexShader: document.getElementById( 'vertexShader' ).textContent,
    //       vertexShader: document.getElementById("vertexShader").textContent,
    //       // fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
    //       fragmentShader: document.getElementById("fragmentShader")
    //         .textContent
    //     });

    //     this.planeFusionMtl = new THREE.ShaderMaterial({
    //       uniforms: THREE.UniformsUtils.merge([
    //         THREE.UniformsLib["common"],
    //         THREE.UniformsLib.specularmap,
    //         THREE.UniformsLib.envmap,
    //         THREE.UniformsLib.aomap,
    //         THREE.UniformsLib.lightmap,
    //         THREE.UniformsLib.fog,
    //         {
    //           hasVertexColor: { value: false },
    //           isFishEyeModel: { value: false },
    //           useUndistort: { value: true },
    //           baseColor: { value: new THREE.Color(0xffffff) },
    //           isPreview: { value: 0 },
    //           distCoeff: { value: new THREE.Vector4(0, 0, 0, 0) },
    //           frustum: {
    //             value: [
    //               new THREE.Vector3(),
    //               new THREE.Vector3(),
    //               new THREE.Vector3(),
    //               new THREE.Vector3(),
    //               new THREE.Vector3()
    //             ]
    //           },
    //           hasBaseTexture: {
    //             value: false
    //           },
    //           baseTexture: {
    //             value: null
    //           },
    //           cameraTexture: {
    //             value: new THREE.TextureLoader().load("./chy/cam.png")
    //           },
    //           modelViewMatrixToFrustum: {
    //             value: new THREE.Matrix4()
    //           },
    //           isTransparent: {
    //             value: true
    //           }
    //           // depthTexture: {
    //           //     value: depthRenderTarget.texture,
    //           // },
    //           // depthCameraNear: {
    //           //     value: depthCamera.near,
    //           // },
    //           // depthCameraFar: {
    //           //     value: depthCamera.far,
    //           // }
    //         }
    //       ]),
    //       vertexColors: THREE.VertexColors,
    //       depthTest: true,
    //       transparent: true,

    //       // wireframe: true,
    //       vertexShader: document.getElementById("vertexShader").textContent,
    //       //   vertexShader:window.vertexShader,
    //       // fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
    //       fragmentShader: document.getElementById("fragmentShader")
    //         .textContent
    //     });

    //     // setup scene lighting
    //     this.ambient = new THREE.AmbientLight(0xffffff, 2);
    //     this.scene.add(this.ambient);
    //     this.scene.add(this.issGroup);
    //     this.loadMesh();
    //     context.resetWebGLState();
    //   },

    //   render: function (context) {
    //     // update camera parameters
    //     ///////////////////////////////////////////////////////////////////////////////////
    //     var cam = context.camera;

    //     this.camera.position.set(cam.eye[0], cam.eye[1], cam.eye[2]);
    //     this.camera.up.set(cam.up[0], cam.up[1], cam.up[2]);
    //     this.camera.lookAt(
    //       new THREE.Vector3(cam.center[0], cam.center[1], cam.center[2])
    //     );

    //     // Projection matrix can be copied directly
    //     this.camera.projectionMatrix.fromArray(cam.projectionMatrix);
    //     // draw the scene
    //     /////////////////////////////////////////////////////////////////////////////////////////////////////
    //     this.renderer.state.reset();
    //     this.renderer.render(this.scene, this.camera);

    //     // // as we want to smoothly animate the ISS movement, immediately request a re-render
    //     externalRenderers.requestRender(window.sceneView);

    //     // cleanup
    //     context.resetWebGLState();
    //   },

    //   lastPosition: null,
    //   lastTime: null
    // };

    // // register the external renderer
    // externalRenderers.add(window.sceneView, fusionExternalRenderer);
    if (Parameters.mode ==='delete'){
      if (window.videofusion) {
        window.videofusion.closeVideo();
        if (window.flvPlayer) {
          window.flvPlayer.unload();
        }
      }
      return;
    }
    window.videofusion = new VideoFusion({
      url: mapconfig.VideoFusion.configurl,
      modelName: Parameters.modelname,
      videoconfig: Parameters.videoconfig
    }, window.sceneView, function () {
      var cameraOpt = {
        animate: true,
        duration: 5000,
        maxDuration: 5000,
      }
      window.sceneView.goTo(Parameters.camera, cameraOpt).then(function () {
        let videoElement = document.getElementById("flv-video");
        window.flvPlayer = flvjs.createPlayer({
          type: "flv",
          url: Parameters.videoUrl,
          islive: true,
          hasAudio: false,
          enableStashBuffer: false
        });
        window.flvPlayer.attachMediaElement(videoElement);
        window.flvPlayer.load();
        window.flvPlayer.play();
      });
    })
  }
}
export default VideoFusion
